import { Layout } from './pages/Layout'
import Login from './pages/Login'
import SearchPage from './pages/Search'
import Result from './pages/Search/Result'
import Article from './pages/Article'
import { customHistory } from '@/utils/history'
import { Router, Route, Switch, Redirect } from 'react-router-dom'
import ProfileEdit from './pages/Profile/Edit'
import { AuthRoute } from './components/AuthRoute'
import './App.scss'

const App = () => {
  return (
    <Router history={customHistory}>
      <div className="app">
        <Switch>
          <Route exact path="/" render={() => <Redirect to="/home" />}></Route>
          <Route path="/home" component={Layout}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/articles/:id" component={Article}></Route>

          <Route exact path="/search">
            <SearchPage />
          </Route>
          <Route path="/search/result">
            <Result />
          </Route>
          <AuthRoute path="/profile/edit">
            <ProfileEdit />
          </AuthRoute>
        </Switch>
      </div>
    </Router>
  )
}

export default App
